import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Grid,
  Space,
} from '@arco-design/web-react';
import { queryBanks } from '@/services/merchant';
import styles from './style/index.module.less';

const { Row, Col } = Grid;
const { useForm } = Form;
const Option = Select.Option;

function SearchForm(props: {
  onSearch: (values: Record<string, any>) => void;
}) {
  const [options, setOptions] = useState([]);

  const [form] = useForm();

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    props.onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  useEffect(() => {
    queryBanks().then((res) => {
      setOptions(res?.data);
    });
  }, []);

  return (
    <div className={styles['search-form-wrapper']}>
      <Form
        form={form}
        className={styles['search-form']}
        labelAlign="left"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label={'银行名称'} field="pBankId">
              <Select
                loading={options.length === 0}
                allowClear
                showSearch
                filterOption={(inputValue, option) =>
                  option.props.text
                    ?.toLowerCase()
                    .indexOf(inputValue.toLowerCase()) >= 0 ||
                  option.props?.children
                    ?.toLowerCase()
                    .indexOf(inputValue.toLowerCase()) >= 0
                }
              >
                {options.map((option, index) => (
                  <Option key={index} value={option.id}>
                    {option.bankName}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label={'支行名称'} field="subBankName">
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label={'省'} field="province">
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label={'市'} field="city">
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label={'区'} field="area">
              <Input allowClear />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Space className={styles['actions']}>
        <Button type="primary" onClick={handleSubmit}>
          查询
        </Button>
        <Button onClick={handleReset}>重置</Button>
      </Space>
    </div>
  );
}

export default SearchForm;
